<template>
  <div>
    <Card :bordered="false" :dis-hover="true">
      <p slot="title">定时任务列表</p>
      <div slot="extra">
        <span class="card-extra-item">
          <Icon size="24" color="#19be6b" type="ios-leaf" />
          启用
        </span>
        <span class="card-extra-item">
          <Icon size="24" color="#ff9900" type="ios-leaf" />
          停用
        </span>
        <Button
          type="primary"
          size="small"
          class="card-extra-item"
          @click="createPeriodicTask = true"
          >创建任务
        </Button>
        <Button
          type="primary"
          size="small"
          icon="ios-refresh"
          class="card-extra-item"
          @click="search"
          >刷新
        </Button>
      </div>
      <Table
        highlight-row
        :columns="periodicTaskColumns"
        :data="periodicTaskData"
        border
        size="small"
      >
        <template slot-scope="{ row }" slot="task">
          {{ registeredTasks[row.task] }}
        </template>
        <template slot-scope="{ row }" slot="crontab">
          {{ row.crontab.minute }}&nbsp;&nbsp;{{
            row.crontab.hour
          }}&nbsp;&nbsp;{{ row.crontab.day_of_week }}&nbsp;&nbsp;{{
            row.crontab.day_of_month
          }}&nbsp;&nbsp;{{ row.crontab.month_of_year }}
        </template>
        <template slot-scope="{ row }" slot="one_off">
          <div>{{ row.one_off ? "Y" : "N" }}</div>
        </template>
        <template slot-scope="{ row }" slot="enabled">
          <Icon v-if="row.enabled" size="24" color="#19be6b" type="ios-leaf" />
          <Icon v-else size="24" color="#ff9900" type="ios-leaf" />
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button
            size="small"
            type="text"
            :style="'color:' + (row.is_active ? '#ff9900' : '#19be6b')"
            @click="handleTogglePeriodicTask(row)"
          >
            {{ row.enabled ? "停用" : "启用" }}
          </Button>
          <Button
            size="small"
            type="text"
            style="color: #2d8cf0"
            @click="showEditPeriodicTaskModal(row)"
            >编辑
          </Button>
          <Poptip
            title="确定要删除吗?"
            :confirm="true"
            :transfer="true"
            @on-ok="handleDeletePeriodicTask(row.id)"
          >
            <Button
              size="small"
              type="text"
              style="color: #ed4014"
              >删除</Button
            >
          </Poptip>
        </template>
      </Table>
      <Page
        transfer
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        :page-size-opts="page.pageSizeOpts"
        size="small"
        show-elevator
        show-sizer
        show-total
        prev-text="上一页"
        next-text="下一页"
        style="margin-top: 15px"
        @on-change="change"
        @on-page-size-change="pageSizeChange"
      />
    </Card>
    <PeriodicTaskCreate
      :createPeriodicTask.sync="createPeriodicTask"
      @initPeriodicTaskTable="search"
    ></PeriodicTaskCreate>
    <PeriodicTaskEdit
      :editPeriodicTask.sync="editPeriodicTask"
      :periodicTask="periodicTask"
      @initPeriodicTaskTable="search"
    ></PeriodicTaskEdit>
  </div>
</template>

<script>
import PeriodicTaskCreate from "@/view/components/CeleryScheduledTaskService/periodic-task/periodic-task-create";
import PeriodicTaskEdit from "@/view/components/CeleryScheduledTaskService/periodic-task/periodic-task-edit";
import {
  getPeriodicTask,
  deletePeriodicTask,
  updatePeriodicTask,
} from "@/api/CeleryScheduledTaskService/periodic-task";
import { getRegisteredTasks } from "@/api/CeleryScheduledTaskService/tasks";

export default {
  name: "periodic-task",
  components: {
    PeriodicTaskCreate,
    PeriodicTaskEdit,
  },
  data() {
    return {
      createPeriodicTask: false,
      editPeriodicTask: false,
      periodicTaskColumns: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "名称",
          key: "name",
          width: 250,
          tooltip: true,
        },
        {
          title: "任务",
          slot: "task",
          minWidth: 300,
        },
        {
          title: "Crontab日程",
          slot: "crontab",
          align: "center",
          minWidth: 150,
        },
        {
          title: "开始时间",
          key: "start_time",
          align: "center",
          width: 150,
        },
        {
          title: "过期时间",
          key: "expires",
          align: "center",
          width: 150,
        },
        {
          title: "一次性任务",
          slot: "one_off",
          align: "center",
          width: 100,
        },
        {
          title: "启用/停用",
          slot: "enabled",
          align: "center",
          width: 100,
        },
        {
          title: "操作",
          slot: "action",
          width: 170,
          align: "center",
          fixed: "right",
        },
      ],
      periodicTaskData: [],
      periodicTask: {},
      registeredTasks: {},
      page: {
        current: 1,
        total: 0,
        pageSize: 50,
        pageSizeOpts: [10, 30, 50, 100, 200],
      },
    };
  },
  mounted() {
    this.search();
    getRegisteredTasks().then((res) => {
      this.registeredTasks = res.data;
    });
  },
  methods: {
    search(page) {
      let data = {
        page: 1,
        page_size: this.page.pageSize,
      };
      if (typeof page == "number") {
        data.page = page;
      }
      this.page.current = data.page;

      getPeriodicTask(data)
        .then((res) => {
          const data = res.data;
          this.periodicTaskData = data.results;
          this.page.total = data.count;
        })
        .catch((err) => {
          this.$Modal.error({
            title: "系统异常，请联系管理员……",
            content: JSON.stringify(err),
            closable: true,
          });
        });
    },

    showEditPeriodicTaskModal(row) {
      this.periodicTask = { ...row };
      this.editPeriodicTask = true;
    },

    handleDeletePeriodicTask(id) {
      deletePeriodicTask(id)
        .then((res) => {
          if (res.status === 204) {
            this.$Message.info("删除成功");
            this.search();
          } else {
            this.$Message.error("删除失败");
          }
        })
        .catch((err) => {
          this.$Modal.error({
            title: "系统异常，请联系管理员……",
            content: JSON.stringify(err),
            closable: true,
          });
        });
    },

    handleTogglePeriodicTask(row) {
      let periodicTask = {
        id: row.id,
        enabled: row.enabled ? "False" : "True",
      };

      updatePeriodicTask(periodicTask)
        .then((res) => {
          this.search();
        })
        .catch((err) => {
          this.$Modal.error({
            title: "系统异常，请联系管理员……",
            content: JSON.stringify(err),
            closable: true,
          });
        });
    },

    change(val) {
      this.page.current = val;
      this.search(val);
    },

    pageSizeChange(val) {
      this.page.pageSize = val;
      this.search();
    },
  },
};
</script>

<style scoped>
</style>
